<!--
  预约表单对话框组件

  @fileoverview 预约记录的创建和编辑表单对话框，提供完整的预约信息录入和管理功能。
  支持新建预约、编辑现有预约、快速数据生成、表单验证等核心功能。

  主要功能：
  - 预约信息的完整录入（个人信息、联系方式、偏好设置等）
  - 表单数据验证和错误处理
  - 随机数据生成（用于测试）
  - 日期时间选择器
  - 实时表单状态管理
  - 编辑模式支持

  @component AppointmentFormDialog
  @author System
  @version 1.0.0
  @since 2024

  @example
  ```vue
  <template>
    <AppointmentFormDialog
      v-model="dialogVisible"
      :appointment="editingAppointment"
      @success="handleFormSuccess"
    />
  </template>

  <script setup>
  import AppointmentFormDialog from './AppointmentFormDialog.vue'

  const dialogVisible = ref(false)
  const editingAppointment = ref(null)

  const handleFormSuccess = () => {
    // 处理表单提交成功
    console.log('预约表单提交成功')
  }
  </script>
  ```
-->

<script setup lang="ts">
import { Clock, Refresh, Star, User } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { computed, reactive, ref, watch } from 'vue'
import 'dayjs/locale/zh-cn'

const props = withDefaults(defineProps<Props>(), {
  appointment: null,
})

const emit = defineEmits<Emits>()

// 配置 dayjs 中文
dayjs.locale('zh-cn')

// ============================================================================
// 组件接口定义
// ============================================================================

/**
 * 组件属性接口
 *
 * @interface Props
 */
interface Props {
  /** 对话框显示状态，支持 v-model 双向绑定 */
  modelValue: boolean
  /** 要编辑的预约记录，为空时表示新建模式 */
  appointment?: any
}

/**
 * 组件事件接口
 *
 * @interface Emits
 */
interface Emits {
  /** 更新对话框显示状态 */
  (e: 'update:modelValue', value: boolean): void
  /** 表单提交成功事件 */
  (e: 'success'): void
}

// ============================================================================
// 响应式数据和引用
// ============================================================================

/** 表单DOM引用，用于验证和重置操作 */
const formRef = ref()
/** 表单提交状态，防止重复提交 */
const submitting = ref(false)

// ============================================================================
// 计算属性
// ============================================================================

/**
 * 对话框可见性的双向绑定计算属性
 *
 * @description 将 props.modelValue 转换为可直接使用的 v-model 绑定
 */
const visible = computed({
  get: () => props.modelValue,
  set: value => emit('update:modelValue', value),
})

/**
 * 判断是否为编辑模式
 *
 * @description 根据传入的 appointment 是否有 id 来判断是编辑还是新建
 * @returns {boolean} true 表示编辑模式，false 表示新建模式
 */
const isEdit = computed(() => !!props.appointment?.id)

// ============================================================================
// 表单数据结构
// ============================================================================

/**
 * 预约表单数据
 *
 * @description 包含预约记录的所有字段，使用 reactive 实现响应式数据绑定
 * @type {object}
 */
const form = reactive({
  /** 序列号（系统自动生成） */
  sequence_number: '',
  /** 护照号码 */
  passport_number: '',
  /** 驾照号码 */
  license_number: '',
  /** 申请人姓名 */
  full_name: '',
  /** 电子邮箱 */
  email: '',
  /** 联系电话 */
  phone_number: '',
  /** 签发国家，默认中国 */
  issuing_country: 'CN',
  /** 签发机关，默认广东 */
  issuing_authority: 'GD',
  /** 服务类型，默认DI */
  service_type: 'DI',
  /** 首选日期列表 */
  preferred_dates: [],
  /** 首选时间列表 */
  preferred_times: [],
  /** 优先级（1-5），默认1 */
  priority: 1,
  /** 备注信息 */
  remarks: '',
  /** 是否为占号数据，默认否 */
  is_placeholder: false,
  /** 是否为监控数据，默认否 */
  is_monitor: false,
  /** 强制仅用首选日期 */
  force_preferred_dates: false,
  /** 官方参考编号（预约成功后或手动补录） */
  reference_number: '',
})

/**
 * 随机数据生成选项配置
 *
 * @description 控制随机数据生成器的行为，用于快速创建测试数据
 * @type {object}
 */
const randomOptions = reactive({
  /** 是否使用真实姓名列表，否则使用随机字符 */
  useRealNames: true,
  /** 是否添加手机号码 */
  addPhoneNumber: true,
  /** 是否偏向选择工作日 */
  preferWeekdays: true,
})

// ============================================================================
// 选项数据和验证规则
// ============================================================================

/**
 * 签发机关选项
 *
 * @description 根据选择的签发国家动态生成机关选项列表
 * @returns {Array<{label: string, value: string}>} 机关选项数组
 */
const authorityOptions = computed(() => {
  if (form.issuing_country === 'CN') {
    return [
      { label: '广东省', value: 'GD' },
      { label: '其他省市', value: 'OTH' },
    ]
  }
  else {
    return [
      { label: '其他', value: 'OTH' },
    ]
  }
})

/**
 * 日期选项列表
 *
 * @description 生成从今天开始的70天日期选项，供首选日期选择器使用
 * @returns {string[]} 日期字符串数组，格式为 YYYY-MM-DD
 */
const dateOptions = computed(() => {
  const dates: string[] = []
  const today = dayjs()

  for (let i = 0; i <= 70; i++) {
    const date = today.add(i, 'day')
    dates.push(date.format('YYYY-MM-DD'))
  }

  return dates
})

/**
 * 表单验证规则
 *
 * @description Element Plus 表单验证规则配置，定义各字段的验证逻辑
 * @type {object}
 */
const rules = {
  passport_number: [
    { required: true, message: '请输入证件号码', trigger: 'blur' },
    {
      validator: (_rule: any, value: string, callback: (err?: Error) => void) => {
        if (!value)
          return callback(new Error('请输入证件号码'))

        const raw = String(value).trim()
        const cleaned = raw.replace(/[^a-z0-9]/gi, '').toUpperCase()

        if (form.is_placeholder) {
          // 占号数据：严格 C/E 规则，总长9位（1 位 C/E + 8 数字，或 2 位 CE/EA... + 7 数字）
          const ce9 = (/^[CE][A-Z]\d{7}$/).test(cleaned) || (/^[CE]\d{8}$/).test(cleaned)
          return ce9 ? callback() : callback(new Error('占号证件需为 C/E 前缀(1-2位)+数字，总长9位'))
        }

        // 真实数据：支持护照（1-2字母+6-14数字）或香港身份证（1-2字母+6位数字+校验位0-9/A，可带括号）
        const passportRegex = /^[A-Z]{1,2}\d{6,14}$/
        const hkidRegex = /^[A-Z]{1,2}\d{6}[0-9A]$/
        const ok = passportRegex.test(cleaned) || hkidRegex.test(cleaned)
        return ok
          ? callback()
          : callback(new Error('证件号码格式不正确（支持护照：1-2字母+6-14数字；香港身份证：1-2字母+6位数字+校验位，可带括号）'))
      },
      trigger: 'blur',
    },
  ],
  license_number: [
    { required: true, message: '请输入驾照号码', trigger: 'blur' },
    { min: 15, max: 20, message: '驾照号码长度应为15-20位', trigger: 'blur' },
  ],
  full_name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' },
  ],
  issuing_country: [
    { required: true, message: '请选择签发国家', trigger: 'change' },
  ],
  issuing_authority: [
    { required: true, message: '请选择签发机关', trigger: 'change' },
  ],
  service_type: [
    { required: true, message: '请选择服务类型', trigger: 'change' },
  ],
  priority: [
    { required: true, message: '请选择优先级', trigger: 'change' },
  ],
}

// ============================================================================
// 监听器和响应式逻辑
// ============================================================================

/**
 * 监听预约数据变化
 *
 * @description 当父组件传入的 appointment 数据变化时，
 * 自动填充表单（编辑模式）或重置表单（新建模式）
 */
watch(() => props.appointment, (newVal) => {
  if (newVal) {
    // 编辑模式，填充表单数据
    Object.assign(form, {
      sequence_number: newVal.sequence_number || '',
      passport_number: newVal.passport_number || '',
      license_number: newVal.license_number || '',
      full_name: newVal.full_name || '',
      email: newVal.email || '',
      phone_number: newVal.phone_number || '',
      issuing_country: newVal.issuing_country || 'CN',
      issuing_authority: newVal.issuing_authority || 'GD',
      service_type: newVal.service_type || 'DI',
      preferred_dates: newVal.preferred_dates ? JSON.parse(newVal.preferred_dates) : [],
      preferred_times: newVal.preferred_times ? JSON.parse(newVal.preferred_times) : [],
      priority: newVal.priority || 1,
      remarks: newVal.remarks || '',
      is_placeholder: newVal.is_placeholder || false,
      is_monitor: newVal.is_monitor || false,
      force_preferred_dates: !!(newVal as any).force_preferred_dates,
      reference_number: newVal.reference_number || '',
    })
  }
  else {
    // 新建模式，重置表单到初始状态
    resetForm()
  }
})

// ============================================================================
// 表单操作方法
// ============================================================================

/**
 * 处理签发国家变化
 *
 * @description 当签发国家改变时，自动重置签发机关为对应的默认值
 */
function onCountryChange() {
  // 根据国家设置默认机关
  form.issuing_authority = form.issuing_country === 'CN' ? 'GD' : 'OTH'
}

/**
 * 重置表单到初始状态
 *
 * @description 清空所有表单字段，恢复到默认值
 */
function resetForm() {
  Object.assign(form, {
    sequence_number: '',
    passport_number: '',
    license_number: '',
    full_name: '',
    email: '',
    phone_number: '',
    issuing_country: 'CN',
    issuing_authority: 'GD',
    service_type: 'DI',
    preferred_dates: [],
    preferred_times: [],
    priority: 1,
    remarks: '',
    is_placeholder: false,
    is_monitor: false,
    force_preferred_dates: false,
    reference_number: '',
  })

  // 清除验证错误
  formRef.value?.clearValidate()
}

// 随机数据生成器
class RandomDataGenerator {
  // 真实中文姓名数据库
  static chineseNames = [
    '张伟',
    '李明',
    '王芳',
    '刘丽',
    '陈明',
    '杨红',
    '赵红',
    '黄伟',
    '周艳',
    '吴华',
    '徐良',
    '孙丽',
    '朝鸿明',
    '马明',
    '朱丽',
    '胡伟',
    '郭明',
    '何芳',
    '林明',
    '罗红',
    '高伟',
    '梁明',
    '宋红',
    '郑明',
    '谢伟',
    '韩红',
    '唐明',
    '赖伟',
    '葉红',
    '阿尔丰',
    '许明',
    '曾红',
    '邵伟',
    '史明',
    '段红',
    '龙明',
    '贾伟',
    '齐红',
    '邱明',
    '秦红',
  ]

  // 生成随机证件号码（C/E 规则，总长9位）
  static generatePassportNumber(): string {
    // 动态导入共享生成器
    // 由于本方法不是 async，这里做一次同步兜底
    const fallback = () => {
      const first = Math.random() < 0.5 ? 'E' : 'C'
      const useTwo = Math.random() < 0.5
      const C2 = ['CA', 'CC', 'CD', 'CE', 'CF', 'CG', 'CH', 'CJ']
      const E2 = ['EA', 'EB', 'EC', 'ED', 'EE', 'EF', 'EG', 'EH', 'EJ', 'EK', 'EL', 'EM', 'EN', 'EP']
      let prefix = first
      if (useTwo)
        prefix = first === 'C' ? C2[Math.floor(Math.random() * C2.length)] : E2[Math.floor(Math.random() * E2.length)]
      const digits = (prefix.length === 1 ? 8 : 7)
      const nums = Math.floor(Math.random() * 10 ** digits).toString().padStart(digits, '0')
      return `${prefix}${nums}`
    }
    try {
      const mod = (window as any).__docValidator || null
      if (mod && typeof mod.generateDocumentNumber === 'function') {
        return mod.generateDocumentNumber({ type: 'random', twoLetterPrefix: 'random' })
      }
      // 注意：动态 import 在打包后为异步，这里无法 await，只能使用兜底
    }
    catch {}
    return fallback()
  }

  // 生成随机驾照号码（中国身份证格式）
  static generateLicenseNumber(): string {
    const regions = ['440', '110', '310', '320', '330', '350', '360', '370', '410', '420', '430', '450', '460', '500', '510', '520', '530', '540', '610', '620', '630', '640', '650']
    const region = regions[Math.floor(Math.random() * regions.length)]
    const year = Math.floor(Math.random() * 30) + 1970 // 1970-1999
    const month = Math.floor(Math.random() * 12) + 1
    const day = Math.floor(Math.random() * 28) + 1
    const sequence = Math.floor(Math.random() * 999) + 1
    const checkCode = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'X'][Math.floor(Math.random() * 11)]

    return `${region}123${year.toString()}${month.toString().padStart(2, '0')}${day.toString().padStart(2, '0')}${sequence.toString().padStart(3, '0')}${checkCode}`
  }

  // 生成随机中文姓名
  static generateChineseName(): string {
    return this.chineseNames[Math.floor(Math.random() * this.chineseNames.length)]
  }

  // 生成随机邮箱
  static generateEmail(name?: string): string {
    const domains = ['gmail.com', 'qq.com', '163.com', 'outlook.com', 'hotmail.com', 'sina.com', '126.com']
    const domain = domains[Math.floor(Math.random() * domains.length)]

    if (name) {
      // 基于姓名生成
      const pinyin = this.chineseToPinyin(name)
      const numbers = Math.floor(Math.random() * 9999).toString().padStart(4, '0')
      return `${pinyin}${numbers}@${domain}`
    }
    else {
      // 纯随机
      const randomStr = Math.random().toString(36).substring(2, 10)
      const numbers = Math.floor(Math.random() * 99).toString().padStart(2, '0')
      return `${randomStr}${numbers}@${domain}`
    }
  }

  // 生成随机电话号码
  static generatePhoneNumber(): string {
    const prefixes = ['130', '131', '132', '133', '135', '136', '137', '138', '139', '150', '151', '152', '153', '155', '156', '157', '158', '159', '180', '181', '182', '183', '184', '185', '186', '187', '188', '189']
    const prefix = prefixes[Math.floor(Math.random() * prefixes.length)]
    const suffix = Math.floor(Math.random() * 100000000).toString().padStart(8, '0')
    return `${prefix}${suffix}`
  }

  // 简单的中文转拼音（仅作演示）
  static chineseToPinyin(chinese: string): string {
    const map: { [key: string]: string } = {
      张: 'zhang',
      李: 'li',
      王: 'wang',
      刘: 'liu',
      陈: 'chen',
      杨: 'yang',
      赵: 'zhao',
      黄: 'huang',
      周: 'zhou',
      吴: 'wu',
      伟: 'wei',
      明: 'ming',
      芳: 'fang',
      丽: 'li',
      红: 'hong',
      华: 'hua',
      良: 'liang',
      艳: 'yan',
      鸿: 'hong',
    }

    let result = ''
    for (const char of chinese) {
      result += map[char] || char.toLowerCase()
    }
    return result
  }

  // 生成首选日期
  static generatePreferredDates(count: number = 3): string[] {
    const dates: string[] = []
    const today = dayjs()

    for (let i = 0; i < count; i++) {
      // 随机选择1-60天后的日期
      const daysAhead = Math.floor(Math.random() * 60) + 1
      const date = today.add(daysAhead, 'day')
      dates.push(date.format('YYYY-MM-DD'))
    }

    return dates
  }

  // 生成首选时间
  static generatePreferredTimes(count: number = 2): string[] {
    const times: string[] = ['09:00', '10:00', '11:00', '14:00', '15:00', '16:00']
    const selected: string[] = []

    for (let i = 0; i < count && selected.length < times.length; i++) {
      let randomTime
      do {
        randomTime = times[Math.floor(Math.random() * times.length)]
      } while (selected.includes(randomTime))

      selected.push(randomTime)
    }

    return selected
  }
}

// ============================================================================
// 随机数据生成方法
// ============================================================================

/**
 * 生成完整的随机预约数据
 *
 * @description 根据配置选项生成包含基本信息和首选时间的完整随机数据，
 * 用于快速创建测试预约记录。
 *
 * @example
 * ```typescript
 * // 点击按钮调用
 * generateRandomData()
 * // 会生成包含姓名、证件号、邮箱、首选日期等完整信息
 * ```
 */
function generateRandomData() {
  const name = randomOptions.useRealNames
    ? RandomDataGenerator.generateChineseName()
    : `测试用户${Math.floor(Math.random() * 9999)}`

  Object.assign(form, {
    passport_number: RandomDataGenerator.generatePassportNumber(),
    license_number: RandomDataGenerator.generateLicenseNumber(),
    full_name: name,
    email: RandomDataGenerator.generateEmail(name),
    phone_number: randomOptions.addPhoneNumber ? RandomDataGenerator.generatePhoneNumber() : '',
    issuing_country: 'CN',
    issuing_authority: 'GD',
    service_type: 'DI',
    preferred_dates: RandomDataGenerator.generatePreferredDates(3),
    preferred_times: RandomDataGenerator.generatePreferredTimes(2),
    priority: Math.floor(Math.random() * 5) + 1,
    remarks: `随机生成的测试数据 - ${dayjs().format('YYYY-MM-DD HH:mm:ss')}`,
  })

  ElMessage.success('🎲 随机数据生成成功！')
}

/**
 * 生成随机基本信息
 *
 * @description 只生成申请人的基本身份信息，包括姓名、证件号、邮箱等，
 * 不影响首选时间等其他设置。
 */
function generateRandomBasicInfo() {
  const name = randomOptions.useRealNames
    ? RandomDataGenerator.generateChineseName()
    : `测试用户${Math.floor(Math.random() * 9999)}`

  Object.assign(form, {
    passport_number: RandomDataGenerator.generatePassportNumber(),
    license_number: RandomDataGenerator.generateLicenseNumber(),
    full_name: name,
    email: RandomDataGenerator.generateEmail(name),
    phone_number: randomOptions.addPhoneNumber ? RandomDataGenerator.generatePhoneNumber() : form.phone_number,
  })

  ElMessage.success('👤 基本信息生成成功！')
}

/**
 * 生成随机首选时间
 *
 * @description 只生成首选日期和时间段，不影响其他表单字段
 */
function generateRandomPreferences() {
  Object.assign(form, {
    preferred_dates: RandomDataGenerator.generatePreferredDates(3),
    preferred_times: RandomDataGenerator.generatePreferredTimes(2),
  })

  ElMessage.success('⏰ 首选时间生成成功！')
}

// ============================================================================
// 对话框和表单控制方法
// ============================================================================

/**
 * 关闭对话框
 *
 * @description 关闭对话框并重置表单到初始状态，清除所有用户输入
 */
function handleClose() {
  visible.value = false
  resetForm()
}

/**
 * 处理表单提交
 *
 * @description 验证表单数据并提交到后端API，支持新建和编辑两种模式。
 * 包含完整的错误处理和用户反馈机制。
 *
 * @async
 * @throws {Error} 表单验证失败或API调用失败时抛出错误
 *
 * @example
 * ```typescript
 * // 在模板中绑定
 * <el-button @click="handleSubmit" :loading="submitting">
 *   {{ isEdit ? '更新' : '创建' }}
 * </el-button>
 * ```
 */
async function handleSubmit() {
  try {
    // 验证表单
    await formRef.value?.validate()

    submitting.value = true

    // 准备提交数据
    // 注意：通过 contextBridge 传参需可结构化克隆，这里先深拷贝为纯数据
    const base = JSON.parse(JSON.stringify(form))
    const submitData = {
      ...base,
      preferred_dates: Array.isArray(base.preferred_dates) && base.preferred_dates.length > 0 ? base.preferred_dates : undefined,
      preferred_times: Array.isArray(base.preferred_times) && base.preferred_times.length > 0 ? base.preferred_times : undefined,
      is_monitor: !!base.is_monitor,
      force_preferred_dates: !!base.force_preferred_dates,
    }

    // 新建时不提交参考编号；编辑时允许更新参考编号
    if (!isEdit.value) {
      delete (submitData as any).reference_number
    }

    // 调用API
    let response
    if (isEdit.value) {
      response = await window.api.appointment.update(props.appointment.id, submitData)
    }
    else {
      response = await window.api.appointment.create(submitData)
    }

    if (response.success) {
      ElMessage.success(isEdit.value ? '更新成功' : '创建成功')
      emit('success')
      handleClose()
    }
    else {
      ElMessage.error(response.error || (isEdit.value ? '更新失败' : '创建失败'))
    }
  }
  catch (error) {
    if (error !== 'validation-failed') {
      console.error('表单提交失败:', error)
      ElMessage.error('操作失败')
    }
  }
  finally {
    submitting.value = false
  }
}
</script>

<template>
  <el-dialog
    v-model="visible"
    :title="isEdit ? '编辑预约记录' : '新建预约记录'"
    width="800px"
    @close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="120px"
      @submit.prevent
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="序号" prop="sequence_number">
            <el-input
              v-model="form.sequence_number"
              placeholder="留空自动生成"
              :disabled="isEdit"
            />
          </el-form-item>
        </el-col>

        <el-col v-if="isEdit" :span="12">
          <el-form-item label="参考编号" prop="reference_number">
            <el-input
              v-model="form.reference_number"
              placeholder="请输入官方参考编号（如有）"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col v-else :span="12">
          <el-form-item label="优先级" prop="priority">
            <el-select v-model="form.priority" placeholder="选择优先级">
              <el-option label="1级 (最高)" :value="1" />
              <el-option label="2级" :value="2" />
              <el-option label="3级" :value="3" />
              <el-option label="4级" :value="4" />
              <el-option label="5级 (最低)" :value="5" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="isEdit" :gutter="20">
        <el-col :span="12">
          <el-form-item label="优先级" prop="priority">
            <el-select v-model="form.priority" placeholder="选择优先级">
              <el-option label="1级 (最高)" :value="1" />
              <el-option label="2级" :value="2" />
              <el-option label="3级" :value="3" />
              <el-option label="4级" :value="4" />
              <el-option label="5级 (最低)" :value="5" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="护照号码" prop="passport_number">
            <el-input
              v-model="form.passport_number"
              placeholder="如: E12345678 / EA1234567 / C12345678 / CA1234567"
              :disabled="isEdit"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="驾照号码" prop="license_number">
            <el-input
              v-model="form.license_number"
              placeholder="如: 440123199001011234"
              :disabled="isEdit"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="记录标签">
            <div class="flex items-center gap-4">
              <el-checkbox v-model="form.is_placeholder">
                占号数据
              </el-checkbox>
              <el-checkbox v-model="form.is_monitor">
                监控数据
              </el-checkbox>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预约策略">
            <div class="flex items-center gap-4">
              <el-checkbox v-model="form.force_preferred_dates">
                强制使用首选日期
              </el-checkbox>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓名" prop="full_name">
            <el-input v-model="form.full_name" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="邮箱地址" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱地址" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="电话号码" prop="phone_number">
            <el-input v-model="form.phone_number" placeholder="请输入电话号码" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="服务类型" prop="service_type">
            <el-select v-model="form.service_type" placeholder="选择服务类型">
              <el-option label="驾照换证 (DI)" value="DI" />
              <el-option label="其他服务" value="OTHER" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="签发国家" prop="issuing_country">
            <el-select
              v-model="form.issuing_country"
              placeholder="选择签发国家"
              @change="onCountryChange"
            >
              <el-option label="中国内地" value="CN" />
              <el-option label="中国内地以外" value="OTH" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="签发机关" prop="issuing_authority">
            <el-select v-model="form.issuing_authority" placeholder="选择签发机关">
              <el-option
                v-for="option in authorityOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="偏好日期" prop="preferred_dates">
        <el-select
          v-model="form.preferred_dates"
          multiple
          placeholder="选择偏好日期，可多选"
          style="width: 100%"
          allow-create
          filterable
        >
          <el-option
            v-for="date in dateOptions"
            :key="date"
            :label="date"
            :value="date"
          />
        </el-select>
        <div class="form-tip">
          格式：YYYY-MM-DD，如 2024-12-25
        </div>
      </el-form-item>

      <el-form-item label="偏好时间" prop="preferred_times">
        <el-select
          v-model="form.preferred_times"
          multiple
          placeholder="选择偏好时间，可多选"
          style="width: 100%"
        >
          <el-option label="09:00" value="09:00" />
          <el-option label="10:00" value="10:00" />
          <el-option label="11:00" value="11:00" />
          <el-option label="14:00" value="14:00" />
          <el-option label="15:00" value="15:00" />
          <el-option label="16:00" value="16:00" />
        </el-select>
      </el-form-item>

      <!-- 只读显示 UA（编辑模式可见） -->
      <el-row v-if="isEdit && (props.appointment?.user_agent)" :gutter="20">
        <el-col :span="24">
          <el-form-item label="User-Agent">
            <el-tooltip placement="top-start" :content="props.appointment?.user_agent">
              <div class="break-all text-xs" style="line-height: 1.4; color: #555;">
                {{ props.appointment?.user_agent }}
              </div>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="备注" prop="remarks">
        <el-input
          v-model="form.remarks"
          type="textarea"
          :rows="3"
          placeholder="请输入备注信息"
        />
      </el-form-item>

      <!-- 随机数据生成区域 -->
      <div v-if="!isEdit" class="random-data-section">
        <el-divider>
          <el-icon><Star /></el-icon>
          随机数据生成（测试用）
        </el-divider>

        <div class="random-buttons">
          <el-button-group>
            <el-button
              size="small" :icon="Refresh"
              type="primary" @click="generateRandomData()"
            >
              生成全部随机数据
            </el-button>
            <el-button
              size="small" :icon="User"
              type="success" @click="generateRandomBasicInfo()"
            >
              基本信息
            </el-button>
            <el-button
              size="small" :icon="Clock"
              type="warning" @click="generateRandomPreferences()"
            >
              首选时间
            </el-button>
          </el-button-group>
        </div>

        <div class="random-options">
          <el-checkbox v-model="randomOptions.useRealNames">
            使用真实中文姓名
          </el-checkbox>
          <el-checkbox v-model="randomOptions.addPhoneNumber">
            自动生成电话号码
          </el-checkbox>
          <el-checkbox v-model="randomOptions.preferWeekdays">
            优先选择工作日
          </el-checkbox>
        </div>
      </div>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">
          取消
        </el-button>
        <el-button type="primary" :loading="submitting" @click="handleSubmit">
          {{ isEdit ? '更新' : '创建' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.form-tip {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  line-height: 1.4;
}

.dialog-footer {
  text-align: right;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-select) {
  width: 100%;
}

/* 随机数据生成区域样式 */
.random-data-section {
  margin-top: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px dashed #d1d5db;
}

.random-data-section .el-divider {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 500;
  color: #4f46e5;
}

.random-buttons {
  margin-bottom: 12px;
  text-align: center;
}

.random-buttons .el-button {
  margin-bottom: 8px;
}

.random-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.random-options .el-checkbox {
  margin: 0;
}

@media (max-width: 768px) {
  .random-buttons .el-button-group {
    flex-direction: column;
  }

  .random-buttons .el-button {
    width: 100%;
    margin-bottom: 4px;
  }

  .random-options {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}
</style>
